<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>答题</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="../../css/common.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <script src="../../js/rem.js"></script>
    <div id="app">
        <div class="img-box">
            <img src="../../image/jiuzhidati.png" alt="" class="img-box_gift">
            <!-- 答题选项 -->
            <div class="answerList">
                <div class="item">
                    <header>
                        <div class="icon">{{ currentNo }}</div>
                        <p>{{ list[currentNo].title }}</p>
                    </header>
                    <ul>
                        <!-- <li :class="{'active':list[currentNo].option_a === currentAnswer}">
                            <span class="pre">A</span>
                            {{ list[currentNo].option_a }}
                        </li> -->
                        <li v-for="(item,i) in arr" :key="i"
                            :class="{'active':list[currentNo][item.suffix] === currentAnswer}"
                            @click="selectAnswer(list[currentNo][item.suffix])">
                            <span class="pre">{{ item.pre }}</span>
                            {{ list[currentNo][item.suffix] }}
                        </li>
                        <!-- <li>
                            <span class="pre">C</span>
                            {{ list[currentNo].option_c }}
                        </li>
                        <li>
                            <span class="pre">D</span>
                            {{ list[currentNo].option_d }}
                        </li> -->
                    </ul>
                </div>
                <button class="btn" :class="{'disabled-btn':!currentAnswer}"  @click="next()">{{ currentNo>=9 ? '提交' : '下一题' }}</button>
            </div>
        </div>

         <!-- 抱歉弹窗 -->
         <div :class="['main']" v-if="isShow">
            <div class="img-box-1">
                <img :src="`../../image/sorry.png`" alt="" class="img-box-1_gift">
                <img src="../../image/delete-icon.png" alt="" class="img-box-1_delete" @click="close">
                <div class="againAnswer" @click="againAnswer"></div>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                list: [{
                        "id": 1005,
                        "title": "浓香型大曲酒的各种呈香呈味的香味成分与（）有关？",
                        "option_a": "窖池",
                        "option_b": "原料",
                        "option_c": "工艺",
                        "option_d": "大曲"
                    },
                    {
                        "id": 1015,
                        "title": "酒令是中华酒文化之一种，在距今2000年前的哪个朝代已经产生。",
                        "option_a": "商代",
                        "option_b": "周代",
                        "option_c": "夏代",
                        "option_d": "秦汉"
                    },
                    {
                        "id": 1004,
                        "title": "浓香型大曲酒生产所用发酵设备是？",
                        "option_a": "石窖",
                        "option_b": "泥窖",
                        "option_c": "发酵灌",
                        "option_d": "陶瓷缸"
                    },
                    {
                        "id": 1012,
                        "title": "白酒是一种什么类型的酒？",
                        "option_a": "蒸馏酒",
                        "option_b": ".鸡尾酒",
                        "option_c": "甜酒",
                        "option_d": "红酒"
                    },
                    {
                        "id": 1007,
                        "title": "最适合用于白酒生产的水？",
                        "option_a": "自来水",
                        "option_b": "泉水",
                        "option_c": "井水",
                        "option_d": "河水"
                    },
                    {
                        "id": 1009,
                        "title": "是哪位皇帝设置酒宴，并利用酒宴的气氛以温和的方式接触他人的兵权，即历史上有名“杯酒释兵权”的典故。",
                        "option_a": "曹操",
                        "option_b": "大禹",
                        "option_c": "赵匡胤",
                        "option_d": "宋徽宗"
                    },
                    {
                        "id": 1010,
                        "title": "青铜类酒器比较盛行的是下列哪个朝代？",
                        "option_a": "唐宋时期",
                        "option_b": "夏商时期",
                        "option_c": "清代",
                        "option_d": "唐代"
                    },
                    {
                        "id": 1001,
                        "title": "被称为“沪型白酒”的香型是?",
                        "option_a": "酱香型",
                        "option_b": "浓香型",
                        "option_c": "药香型",
                        "option_d": "清香型"
                    },
                    {
                        "id": 1006,
                        "title": "白酒是中国所持有的，一般是（）酿成后经蒸馏而成的。",
                        "option_a": "果酒",
                        "option_b": "粮食",
                        "option_c": "甘蔗酒",
                        "option_d": "甜菜"
                    },
                    {
                        "id": 1011,
                        "title": "“有饭不尽，委之空桑，积郁成味，久蓄气芳。本出于此，不由奇方。”是至今尚流传关于（）传说的一个故事。",
                        "option_a": "杜康作酒",
                        "option_b": "上皇兴酒",
                        "option_c": "仪狄造酒",
                        "option_d": "天赐美酒"
                    }
                ],
                currentNo: 0,
                currentAnswer: '',
                arr: [{
                        pre: 'A',
                        suffix: 'option_a'
                    },
                    {
                        pre: 'B',
                        suffix: 'option_b'
                    },
                    {
                        pre: 'C',
                        suffix: 'option_c'
                    },
                    {
                        pre: 'D',
                        suffix: 'option_d'
                    },
                ],
                answerList:[],
                isShow:false
            },
            methods: {
                next() {
                    const id = this.list[this.currentNo].id // 当前答题id
                    const answer = this.currentAnswer // 当前答题回答答案
                    if(!this.currentAnswer){
                        // window.open(`/src/components/congratulation/index.html`,'_self') 
                        return
                    }
                    if (this.currentNo >= 9){ //答完题跳转
                        window.open(`/src/components/congratulation/index.html`,'_self')  // 正确率 大于80% 的路径
                        // this.isShow = true // 正确率 小于80% 弹窗
                    }else{
                        this.currentNo++ 
                        this.answerList.push(this.currentAnswer)
                        this.currentAnswer = ''
                    }
                },
                selectAnswer(data){
                    this.currentAnswer = data
                },
                close() {
                    this.isShow = false
                },
                againAnswer(){
                    this.currentNo = 0
                    this.currentAnswer = ''
                    this.isShow = false
                }
            },
        });
    </script>
</body>

</html>